<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/css/demo.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript">
	$(function(){
		$("#test").click(function(){
			ui.openTab();
		})
	})
</script>
</head>
<body class="easyui-layout">
	<!-- head -->
	<div data-options="region:'north',border:false"
		style="height: 60px; background: #B3DFDA; padding: 10px"></div>
	<!-- left menu -->
	<div data-options="region:'west',split:true,title:'West'" style="width: 150px;">
		<div class="easyui-accordion" style="width: 100%; border: none;">
			<div title="系统设置" data-options="iconCls:'icon-ok'"
				style="border: none; overflow: auto; padding: 10px;"></div>
			<div title="业务管理" data-options="iconCls:'icon-help'" style="border: none; padding: 10px;">
			</div>
		</div>
		<div style="margin: 20px 0 10px 0;"></div>
	</div>
	<!-- right 右侧菜单-->
	<!-- <div data-options="region:'east',split:true,collapsed:true,title:'East'"
		style="width: 100px; padding: 10px;"></div> -->
	<!-- bottom -->
	<div data-options="region:'south',border:false"
		style="height: 50px; background: #A9FACD; padding: 10px;"></div>
	<!-- content -->
	<div data-options="region:'center'">
		<div  id="main_tabs" class="easyui-tabs" data-options="plain:true,fit:true">
			<div title="首页" style="padding: 10px">
				<p style="font-size: 14px">jQuery EasyUI framework helps you build your web pages easily.</p>
				<ul>
					<li>easyui is a collection of user-interface plugin based on jQuery.</li>
					<li>easyui provides essential functionality for building modem, interactive, javascript
						applications.</li>
					<li>using easyui you don't need to write many javascript code, you usually defines
						user-interface by writing some HTML markup.</li>
					<li>complete framework for HTML5 web page.</li>
					<li>easyui save your time and scales while developing your products.</li>
					<li>easyui is very easy but powerful.</li>
				</ul>
				<button id="test">test3</button>
			</div>
			<div title="可关闭选项卡" data-options="iconCls:'icon-help',closable:true" style="padding: 10px">
				This is the help content.</div>
		</div>
	</div>
</body>
</html>